<template>
	<view v-if="info" class="content">
		<!-- 轮播 -->
		<swiper :circular="true" v-if="info.carousel && info.carousel.length" class="swiper" indicator-dots
			:autoplay="autoplay">
			<swiper-item v-for="item in info.carousel" :key="item.id">
				<u-image @click="previewImage(item)"
					v-if="(type === 'pet' && item.type === 4) || (type ==='master' && item.type === 7)" height="252px"
					:src="item.attachment"></u-image>
				<video v-if="(type === 'pet' && item.type === 5) || (type ==='master' && item.type === 8)"
					@play="autoplay = false" @ended="autoplay = true" :src="item.attachment"></video>
			</swiper-item>
		</swiper>

		<!-- 悬赏 -->
		<view class="border-b bg-white u-p-28">
			<view class="u-flex u-row-between">
				<text class="title u-flex-1 u-font-16 color-3 u-line-1">{{info.title}}</text>
				<view @click="showShareModal = true" class="u-flex">
					<image style="width:20px;height: 20px;" src="@/static/index/share.png"></image>
					<text class="u-font-14 color-80 u-m-l-12">
						转发
					</text>
				</view>

			</view>
			<!-- is_personally 是否面议：1是 0不 -->
			<view v-if="type=='pet' && info.is_personally === 0" class="money u-m-t-8">
				<text class="u-font-12">悬赏￥</text>
				<text class="u-font-18">{{info.reward}}</text>
			</view>
			<view v-if="type=='pet' && info.is_personally === 1" class="money u-m-t-8">
				<text class="u-font-18 u-m-l-10">面议</text>
			</view>


			<view class="u-flex u-m-t-12 u-row-between u-font-12 color-80">
				<text>{{info.create_time}}</text>
				<view class="">
					<text>{{info.page_view}}查看</text>
					<text class="u-m-l-46">{{info.transmit_num}}转发</text>
				</view>
			</view>



		</view>

		<!-- 宠物信息 -->
		<view class="u-p-l-28 u-p-t-22 u-p-r-28 bg-white">
			<view class="border-title">
				宠物信息
			</view>
			<view class="u-flex u-m-t-28">
				<view class="">
					<image style="width:50px;height: 50px;border-radius: 50%;" :src="info.cover">
					</image>
				</view>

				<view class="u-m-l-34 u-flex-1">
					<view class="u-font-16 color-3 u-m-b-12">
						{{info.pet_nickname || info.title}}
					</view>
					<u-tag class="u-m-r-8" color="#333" :text="info.sex" bg-color="#FEF2BF" mode="dark" />
					<u-tag class="u-m-r-8" color="#333" :text="info.category" bg-color="#FEF2BF" mode="dark" />
				</view>
			</view>

			<view class="border-title u-font-16 color-3 u-m-t-36 u-m-b-18">
				<text v-if="type=='pet'">走失地点/时间</text>
				<text v-else>捡拾详情</text>
			</view>
			<view @click="chooseLocation" class="time">
				<view class="u-flex u-m-b-14 u-p-t-16">
					<u-image width="14px" height="14px" src="@/pagesIndex/static/time.png"></u-image>
					<text class="u-m-l-12 u-font-12">{{info.lost_time || info.pick_time}}</text>
				</view>
				<view class="u-flex">
					<u-image width="14px" height="14px" src="@/pagesIndex/static/location_light.png"></u-image>
					<text class="u-m-l-12 u-font-12">{{info.location}}</text>
				</view>
			</view>


			<view class="border-title u-m-t-28 u-m-b-14">
				<text v-if="type=='pet'">走失详情</text>
				<text v-else>详情描述</text>
			</view>
			<view class="u-font-12 color-80 u-p-b-30 u-p-l-20">
				{{info.detail}}
			</view>
		</view>


		<!-- 发布者 -->
		<publisher :user="info.user" :info="info"></publisher>

		<!-- 留言 -->
		<!-- type = 1领养评论 2寻宠评论 3寻主评论 4社区帖子 -->
		<comment-list ref="commentList" :type="type=='pet'?2:3" :oid="id" @refresh="getInfo"></comment-list>

		<!-- 返回顶部 -->
		<u-back-top :duration="1000" :scroll-top="scrollTop"></u-back-top>

		<!-- 底部操作 -->
		<view class="action u-flex">
			<view class="u-flex-1 u-flex u-p-r-40">
				<view @click="goComment" class="u-font-12 color-3 u-m-l-50">
					<u-image width="22px" height="22px" src="@/static/index/comment.png">
					</u-image>
					<view class="u-m-t-8">留言</view>
				</view>
				<view @click="changePoster" class="u-font-12 color-3" style="margin-left: 47px;">
					<u-image width="22px" height="22px" src="@/static/index/like.png">
					</u-image>
					<view class="u-m-t-8">海报</view>
				</view>
			</view>
			<view class="u-flex-1 u-p-r-28">
				<view @click="showShareModal = true" class="share-btn">
					分享好友
				</view>
			</view>

		</view>



		<!-- 分享弹框 -->
		<u-mask :show="showShareModal" @click="showShareModal = false">
			<view class="share-warp">
				<view class="rect" @tap.stop>
					<view class="title">
						转发扩散，帮Ta更快回家！
					</view>
					<view class="u-flex u-row-around u-p-t-36">
						<view class="item">
							<button class="btn" open-type="share">
								<u-image width="36px" height="36px" src="@/static/index/share_wechat.png"></u-image>
								<text class="u-m-t-12 u-font-12 color-3">微信好友</text>
							</button>
						</view>
						<view @click="changePoster" class="item">
							<button class="btn">
								<u-image width="36px" height="36px" src="@/pagesIndex/static/share_friend.png"></u-image>
								<text class="u-m-t-12 u-font-12 color-3">朋友圈</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</u-mask>


		<!-- 海报 -->
		<u-mask :mask-click-able="false" :show="showPosterModal">
			<view class="poster-warp">
				<u-image :src="posterImg" :width="poster.width + 'px'" :height="poster.height + 'px'"></u-image>
				<canvas class="poster" canvas-id="poster"
					:style="{width: poster.width + 'px', height: poster.height + 'px'}"></canvas>
				<view class="btns">
					<view @click="showPosterModal = false">
						关闭
					</view>
					<view @click="saveCanvas">
						保存
					</view>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
	import noData from '@/components/noData/noData.vue';
	import publisher from '@/components/publisher/publisher.vue';
	import commentList from '@/pagesIndex/components/commentList/commentList.vue';
	import {
		getFindPetDetail,
		getFindMasterDetail,
		transmitAdd
	} from '@/api/index';
	import {
		getwxacodeunlimit
	} from '@/api/common';
	import drawPoster from '@/drawPoster';
	export default {
		components: {
			noData,
			publisher,
			commentList
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		data() {
			return {
				id: '',
				type: 'pet',
				info: null,
				scrollTop: 0,
				showShareModal: false,
				autoplay: true,
				showPosterModal: false,
				poster: {},
				posterImg: '',
				codeUrl: '',
			};
		},
		onLoad(options) {
			this.type = options.type;
			this.id = options.id;
			if (options.type == 'pet') {
				uni.setNavigationBarTitle({
					title: "寻宠详情"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "寻主详情"
				})
			}

			if (options.scene) { //// 分享的海报里面的小程序码会携带type和id;
				let scene = decodeURIComponent(options.scene);
				//&是我们定义的参数链接方式
				let type = scene.split("&")[0];
				let id = scene.split('&')[1];
				this.type = type;
				this.id = id;
				this.getInfo()
			}


		},
		onShow() {
			if (this.$refs.commentList) {
				this.$refs.commentList.getList(); // 评论成功后刷新评论列表
			}
			this.getCodeUrl();
			this.getInfo();
		},
		onShareAppMessage() {
			this.transmitAdd();
			return {
				title: this.info.title,
				path: `/pagesIndex/findInfo/findInfo?type=${this.type}&id=${this.id}`,
				imageUrl: this.info.cover
			}
		},
		onShareTimeline() {
			return {
				title: this.info.title,
				imageUrl: this.info.cover
			}
		},
		methods: {
			chooseLocation() {
				uni.openLocation({
					type: 'gcj02',
					latitude: Number(this.info.lat),
					longitude: Number(this.info.lng),
					address: this.info.location,
					name: this.info.city + this.info.district,
				})
			},
			previewImage(item) {
				const urls = this.info.carousel.map(item => item.attachment);
				uni.previewImage({
					current: item.attachment,
					urls
				})
			},
			async transmitAdd() {
				// 1领养 2寻宠 3寻主 4社区帖子
				let type = 2;
				if (this.type === 'master') {
					type = 3;
				}
				await transmitAdd({
					type,
					oid: this.id,
				});
			},
			async getInfo() {
				let func = getFindPetDetail
				if (this.type == 'master') {
					func = getFindMasterDetail;
				}
				const res = await func({
					id: this.id
				});
				this.info = res.data;
				this.info.user.nickname = this.info.publisher;
			},
			goComment() {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
						mask: true,
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);
				} else {

					// 1领养 2寻宠 3寻主 4社区帖子
					let type = 2;
					if (this.type === 'master') {
						type = 3;
					}
					uni.navigateTo({
						url: `/pagesIndex/comment/comment?type=${type}&oid=${this.id}&parent_id=0`
					})
				}
			},
			async getCodeUrl() {
				const res = await getwxacodeunlimit({
					page: 'pagesIndex/findInfo/findInfo',
					scene: this.type + '&' + this.id
				});
				this.codeUrl = res.data;
			},
			async changePoster() {
				const access_token = uni.getStorageSync('access_token');
				if (!access_token) {
					uni.showToast({
						title: '请先登录',
						icon: "none",
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500);

				} else {
					this.showShareModal = false;
					uni.showLoading({
						title: '海报绘制中',
						mask: true,
					})
					let res = null;
					if (this.type === 'master') {
						res = await drawPoster.drawFindMaster(this, 'poster', this.codeUrl, this.info.cover);
					} else {
						res = await drawPoster.drawFindPet(this, 'poster', this.codeUrl, this.info.cover);
					}
					if (res.poster && res.poster.tempFilePath) {
						this.posterImg = res.poster.tempFilePath;
						uni.hideLoading();
						this.showPosterModal = true;
					} else {
						uni.showToast({
							title: '海报绘制失败',
							icon: "none",
						})
					}
				}

			},
			saveCanvas() {
				drawPoster.saveImg(this, this.posterImg)
			},

		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 70px;
	}

	.swiper {
		height: 252px;

		video {
			width: 100%;
			height: 252px;
		}
	}

	.title {
		width: 70%;
	}

	.money {
		color: #F34184;
	}

	.time {
		height: 56px;
		background: #F9F9F9;
		border-radius: 4px;
		color: #FFCF0B;
		padding-left: 18rpx;
	}

	.action {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 1;
		background-color: #fff;
		padding: 9px 0;
		box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.03);
		border-radius: 10px 10px 0px 0px;
	}

	.share-btn {
		width: 183px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background: #FFCF0B;
		border-radius: 20px;
		font-size: 16px;
		color: #333;
	}

	// 分享弹框
	.share-warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			width: 500rpx;
			background-color: #fff;
			border-radius: 6px;
			padding: 17px 41px 24px;

			.title {
				padding: 14rpx 20rpx;
				background-color: #F8F8F8;
				border-radius: 4px;
				color: #F34184;
				font-size: 12px;
				text-align: center;
				width: 100%;
			}

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.btn {
					background: #fff;
					padding: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					&::after {
						border: 0;
					}
				}
			}
		}
	}

	.poster {
		position: absolute;
		top: -9999px;
		left: -9999px;
		width: 347px;
		height: 550px;
		z-index: 9999;
	}
</style>
